<template>
  <div>
    <tou></tou>
    <div v-if="list.length == 0" class="box">
      <img src="../assets/img.png" alt="" />
    </div>
    <div class="box2" v-else>
      <el-card class="box-card">
        <section>
          <div class="list base">
            <div v-if="list.length != 0">
              <div class="head">
                <el-row>
                  <el-col :span="2" style="text-align: center">
                    <el-checkbox v-model="checked" @change="checkall"
                      >全选</el-checkbox
                    >
                  </el-col>
                  <el-col :span="3">&nbsp;</el-col>
                  <el-col :span="6">商品名称</el-col>
                  <el-col :span="3" style="text-align: center">单价</el-col>
                  <el-col :span="5" style="text-align: center">数量</el-col>
                  <el-col :span="2" style="text-align: center">小计</el-col>
                  <el-col :span="3" style="text-align: center">操作</el-col>
                </el-row>
              </div>
              <div class="cartlist" v-for="(item, index) in list" :key="index">
                <el-row>
                  <el-col :span="2" style="text-align: center">
                    <el-checkbox v-model="item.check"></el-checkbox>
                  </el-col>
                  <el-col :span="3" style="height: 80px">
                    <a :href="'#/details?productID=' + item.productID">
                      <img
                        :src="'http://106.15.179.105:3000/' + item.productImg"
                        style="width: 60px; height: 60px"
                      />
                    </a>
                  </el-col>
                  <el-col :span="6">
                    <a :href="'#/details?productID=' + item.productID">{{
                      item.productName
                    }}</a>
                  </el-col>
                  <el-col :span="3" style="text-align: center"
                    >{{ item.price }}元</el-col
                  >
                  <el-col :span="5" style="text-align: center">
                    <el-input-number
                      size="small"
                      v-model="item.num"
                      :min="1"
                      :max="5"
                    ></el-input-number>
                  </el-col>
                  <el-col :span="2" style="text-align: center; color: #ff6700"
                    >{{ item.price * item.num }}元</el-col
                  >
                  <el-col :span="3" style="text-align: center">
                    <el-popover
                      placement="top"
                      width="160"
                      v-model="visible[index].numa"
                    >
                      <p>确定要删除吗？</p>
                      <div style="text-align: right; margin: 0">
                        <el-button
                          type="primary"
                          size="mini"
                          @click="
                            del({ index: index, product_id: item.productID })
                          "
                          >确定</el-button
                        >
                      </div>
                      <i
                        class="el-icon-error"
                        slot="reference"
                        style="cursor: pointer; font-size: 20px"
                      ></i>
                    </el-popover>
                  </el-col>
                </el-row>
              </div>
              <div class="footer">
                <div class="left">
                  <p style="width: 120px; text-align: center">
                    <a href="#/goods">继续购物</a>
                  </p>
                  <p
                    style="margin-right: 20px; width: 1px; background: #eeeff2"
                  ></p>
                  <p>
                    共
                    <span style="color: #ff6700">{{ list.length }}</span>
                    件商品， 已选中
                    <span style="color: #ff6700">{{ num }}</span> 件
                  </p>
                </div>
                <div class="right">
                  <p style="color: #ff6700; font-size: 14px">
                    合计:
                    <span style="font-size: 30px">{{ price }}元</span>
                  </p>
                  <div :class="btnflag == true ? 'ts' : 'btn'" @click="go">
                    去结算
                  </div>
                </div>
              </div>
            </div>
            <div v-else>
              <div class="em">
                <div class="emro"></div>
                <div style="margin-top: 120px; color: #b0b0b0">
                  <h2 style="font-size: 40px">您的购物车还是空的</h2>
                  <p style="margin-top: 20px; font-size: 20px">快去购物吧！</p>
                </div>
              </div>
            </div>
          </div>
        </section>
      </el-card>
    </div>
    <fot></fot>
  </div>
</template>

<script>
import tou from '@/components/header.vue'
import fot from '@/components/footer.vue'
import { getShoppingCart, deleteShoppingCart } from '@/api/login.js'

export default {
  components: { tou, fot },
  data() {
    return {
      checked: false,
      list: [],
      num: 0,
      visible: [],
      btnflag: true,
      user_id: this.$store.state.user_id,
    }
  },
  mounted() {
    this.getcart()
    console.log(this.user_id, 'aa')
  },
  methods: {
    getcart() {
      getShoppingCart({ user_id: this.user_id }).then((res) => {
        this.list = res.data.shoppingCartData
        this.list.forEach((item) => {
          this.visible.push({ numa: false })
        })
      })
    },
    checkall() {
      this.list.filter((item) => {
        item.check = this.checked
      })
    },
    del(obje) {
      let { index, product_id } = obje
      this.visible[index].numa = false
      let obj = {
        user_id: this.user_id,
        product_id: product_id,
      }
      console.log(obje)
      deleteShoppingCart(obj).then((res) => {
        if (res.data.code == '001') {
          this.$notify({
            title: '成功',
            message: res.msg,
            type: 'success',
            offset: 100,
          })
        } else {
          this.$notify({
            title: '错误',
            message: res.msg,
            type: 'error',
            offset: 100,
          })
          this.num = true
        }
        this.getcart()
      })
    },
    go() {
      if (this.btnflag == false) {
        return false
      } else {
        let arr = []
        this.list.filter((item) => {
          if (item.check == true) {
            arr.push(item)
          }
        })
        this.$router.push({
          name: 'confirmOrder',
          params: { list: arr },
        })
      }
    },
  },
  computed: {
    price() {
      let num = 0
      this.list.forEach((item) => {
        if (item.check == true) {
          num += item.price * item.num
        }
      })
      return num
    },
  },
  watch: {
    list: {
      handler(nw) {
        let arr = this.list.filter((item) => {
          return item.check == true
        })
        this.num = arr.length
        if (arr.length == nw.length && arr.length > 0) {
          this.checked = true
        } else {
          this.checked = false
        }
        if (arr.length > 0) {
          this.btnflag = true
        } else {
          this.btnflag = false
        }
      },
      deep: true,
    },
  },
}
</script>

<style scoped lang="scss">
.box2,
.box {
  width: 1400px;
  margin: 0 auto;
  img {
    width: 100%;
  }
}
.box2 {
  section {
    background-color: #f5f5f5;
    .list {
      padding: 20px 0;
      .head {
        width: 100%;
        height: 85px;
        background-color: white;
        line-height: 85px;
        box-sizing: border-box;
      }
      .cartlist {
        background-color: white;
        border-top: 1px solid #ccc;
        width: 100%;
        padding: 15px 0;
        height: 85px;
        // line-height: 85px;
      }
      .footer {
        height: 50px;
        background-color: white;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
          display: flex;
          font-size: 16px;
          color: #757575;
        }
        .right {
          display: flex;
          height: 50px;
          line-height: 50px;
          .btn {
            width: 200px;
            height: 50px;
            text-align: center;
            background: #e0e0e0;
            color: #afb4c0;
            font-size: 18px;
            margin-left: 50px;
            cursor: pointer;
          }
          .ts {
            width: 200px;
            height: 50px;
            text-align: center;
            background: #ff6700;
            color: white;
            font-size: 18px;
            margin-left: 50px;
            cursor: pointer;
          }
        }
      }
      a {
        text-decoration-line: none;
        color: black;
      }
      a:hover {
        color: #ff6700;
      }
      .el-icon-error:hover {
        color: #ff6700;
      }
    }
  }
}
</style>
